<template>
	<view class="reservation">
		<view class="backimg" :style="{top:reser_img_hright}">
			<image class="backimg" src="@/static/img/reservation/back.png" mode="aspectFill"></image>
		</view>
		<view class="reser-img">
			<image class="reser-img" src="@/static/tabBar/../../static/img/reservation/4b4e6bfe35abf3459be94dc9cf1c52e.png" mode="widthFix"></image>
		</view>
		<view class="MoBodyL">
			<view class="MoBodyL-title">
				我们的优势
			</view>
			<view class="MoBodyL-content" >
					<view style="line-height: 50rpx;text-indent: 2em;">
						转变教育观念，开启智慧成长之旅！我们的指导师将帮助您科学规划，提升教育认知，让孩子能够独立发现、看待、解决问题！
					</view>
					<view style="line-height: 50rpx;text-indent: 2em;">
						家庭教育新模式！亲子团体学习，培养孩子能力与素养，填补传统单方面授课的不足！让孩子综合能力得到全面提升！
					</view>
					<view style="line-height: 50rpx;text-indent: 2em;">
						与指导师合作，让教育更科学！家庭亲子课程，促进家庭成员共同成长！体验全新教育模式，打造全面发展的孩子！
					</view>
					
				</ul>
			</view>
			
		</view>
		<view class="MoBodyL-bot" @tap="goreservation_s">
			<view class="MoBodyL-bot-al">
				<view class="MoBodyL-bot-l">
					在线预约
				</view>
				<image class="MoBodyL-bot-r" src="@/static/tabBar/right-arrow.png" mode=""></image>
			</view>
			<view class="MoBodyL-b-l">
				模式介绍
			</view>
		</view>
		<view class="MoBodyB" >
			<view class="MoBodyB-it" v-for="(item,index) in con_list" :key="item.id">
				<view class="">
					<image class="it-img" :src="item.img" mode=""></image>
				</view>
				<view class="MoBodyB-con">
					<view class="item-t-top">
						{{item.con_1}}
					</view>
					<view class="item-t-bot">
						{{item.con_2}}
					</view>
				</view>
			</view>
		</view>
		<view class="MoBodyL-bot">
			<view class="MoBodyL-bot-to" @tap="goreservation_s">
				<view class="MoBodyL-bot-l">
					在线预约
				</view>
				<image class="MoBodyL-bot-r" src="@/static/tabBar/right-arrow.png" mode=""></image>
			</view>
			
		</view>
		<tarbar currentPage="reservation"></tarbar>
	</view>
</template>
<script>
	import tarbar from '@/common/tabbar.vue'
	export default{
		data(){
			return{
				reser_img_hright:"",
				con_list:[{
					id:0,
					img:"../../static/img/reservation/1.png",
					con_1:"关于指导师服务",
					con_2:"我们为家长提供转变知识导向观念的指导师服务。这些指导师将制定科学的教育规划，帮助家长提升教育认知水平。通过与家长的前期沟通和亲子互动，他们将帮助家长以能力、素养导向来教育孩子，让孩子能够独立发现、思考和解决问题。"
				},{
					id:1,
					img:"../../static/img/reservation/2.png",
					con_1:"关于亲子课程",
					con_2:"我们的平台提供能力素养导向的亲子课程，将亲子视为一个学习团体。这些课程旨在提升孩子的综合能力，填补传统单方面授课方式的不足。通过亲子课程，家庭成员可以共同学习，促进孩子的全面发展。"
				},{
					id:2,
					img:"../../static/img/reservation/3.png",
					con_1:"整体平台",
					con_2:"我们的平台致力于转变教育观念，通过提供专业的指导师服务和能力素养导向的亲子课程，帮助家长和家庭成员实现教育的科学规划和全面发展。我们的目标是培养独立思考、问题解决能力强的孩子，为他们未来的成长打下坚实基础。"
				}]
			}
		},
		methods:{
			goreservation_s(){
				this.navigateTo({
					url:'/pages/reservation_s/reservation_s',
					animationType:"fade-in",
					animationDuration:0
				})
			},
			getheight(){
				const query = uni.createSelectorQuery().in(this);
				                    query
				                      .select(".reser-img")
				                      .boundingClientRect((data) => {
				                          this.reser_img_hright = data.height + 'px'
				                        
				                      })
				                      .exec();
			}
		},
		onReady() {
			this.getheight()
		},
		components:{
			tarbar
		}
	}
</script>
<style lang="scss">
	.reservation{
		/* background-color: #f5f5f5; */
		padding:10rpx 25rpx;
		
		.reser-img{
		width: 100%;
		position: relative;
		z-index: 999;
	}
	.backimg{
		position: absolute;
		
		left: 10rpx;
		width: 95%;
		z-index: 0;
	}
	.MoBodyL{
		font-family:"arial","微软雅黑","Microsoft YaHei" ;
		position: relative;
		z-index: 999;
		.MoBodyL-title{
			font-size: 36rpx;
			padding: 30rpx;
		}
		.MoBodyL-content{
			font-size: 24rpx;
			padding:10rpx 30rpx;
			color: #545454;
		}
		
	}
	.MoBodyL-bot{
		background-color: #ffffff;
		
		.MoBodyL-bot-al{
			display: flex;
			justify-content: center;
			padding: 15rpx 30rpx;
			margin: 80rpx auto  0;
			width: 30%;
			color: #FFFFFF;
			background-color: #10af70;
			.MoBodyL-bot-r{
			width: 45rpx;
			height: 45rpx;
		}
		
		}
		.MoBodyL-b-l{
			padding: 50rpx 30rpx 30rpx;
			font-size: 52rpx;
			color: #10af70;
		}
		.MoBodyL-bot-to{
			display: flex;
			justify-content: center;
			padding: 15rpx 30rpx;
			margin: 0 auto  ;
			width: 30%;
			color: #FFFFFF;
			background-color: #10af70;
			.MoBodyL-bot-r{
			width: 45rpx;
			height: 45rpx;
		}
		
		}
	}
	.MoBodyB{
		padding: 30rpx 35rpx;
		background: url('../../static/img/reservation/492e79dc451ccb1f7dc024cbccd9983.png') no-repeat;
		background-size: cover;
		background-position:  center; 
		.MoBodyB-it{
			margin: 20rpx 0;
			background-color: rgba(255, 255, 255, .7);
			display: flex;
			.it-img{
				padding:10rpx 0 ;
				width: 50rpx;
				height: 50rpx;
			}
		}
		.MoBodyB-con{
			padding: 10rpx 20rpx;
			line-height: 50rpx;
			.item-t-top{
				color: #10af70;
				font-size: 30rpx;
			}
			.item-t-bot{
				font-size: 24rpx;
				padding-bottom: 50rpx;
			}
		}
	}
}

	
</style>